<template>
  <div class="win">
    <div class="head_box">
      <div class="row">
        <img src="/static/img/search_icon.png" class="search_icon" />
        <input
          type="text"
          confirm-type="search"
          @confirm="searchHouse"
          v-model="searchText"
          placeholder="点击输入搜索内容"
          placeholder-style="color:#b3b3b3"
        />
      </div>
      <div class="tips_box">
        <div
          class="item"
          :class="current==index?'act':''"
          @click="tipsTap(item.class_id,index)"
          v-for="(item, index) in tips"
          :key="index"
        >
          <p>{{item.name}}</p>
        </div>
      </div>
    </div>
    <div class="class_data_box">
      <div class="class_data" v-for="(item, index) in classData" :key="index">
        <button @click="hr_courseDetailed(item.course_id)">查看详细</button>
        <img :src="item.image" />
        <div class="item_right_box">
          <p class="name ellipsis2">{{item.title}}</p>
          <p class="time">{{item.create_time}}</p>
        </div>
      </div>
      <noData v-if="classData==''"></noData>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
import noData from "@/components/noData";
export default {
  data() {
    return {
      bjurl: "",
      tips: [], //标签数据
      classData: [], //课程数据
      searchText: "", //搜索的值
      type: 1, //1 使用教程, 2 销售课堂, 3 知识要点
      class_id: "", //存储选择的分类ID
      current: 50, //标签切换按钮
      noData: false, //无数据判断
      pro_id: 0 //商品ID
    };
  },
  methods: {
    // 请求接口课程列表
    getHouserList() {
      this.$ajax("/home/course/index", "post", {
        mark: this.type,
        class_id: this.class_id,
        keyword: this.searchText,
        pro_id: this.pro_id
      })
        .then(res => {
          if (res.status) {
            this.classData = res.data;
            this.$forceUpdate();
          } else {
            this.classData = "";
            this.$forceUpdate();
          }
        })
        .catch(err => {});
    },
    // 请求接口课程分类标签
    getCourseClass() {
      this.$ajax("/home/course/course_class", "post", {})
        .then(res => {
          
          if (res.status) {
            this.tips = res.data;
          } else {
          }
        })
        .catch(err => {});
    },
    //搜索课程
    searchHouse() {
      this.getHouserList();
    },
    //选择按钮
    tipsTap(id, index) {
      if (this.current == index) {
        this.current = 50;
        this.class_id = null;
        this.getHouserList();
      } else {
        this.current = index;
        this.class_id = id;
        this.getHouserList();
      }
    },
    //跳转到课程详情
    hr_courseDetailed(course_id) {
      wx.navigateTo({
        url: "../courseDetailed/main?course_id=" + course_id
      });
    }
  },
  components: {
    noData
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.type = e.type; //1 使用教程, 2 销售课堂, 3 知识要点
    this.pro_id = e.pro_id;
    this.getCourseClass();
    this.getHouserList();
  }
};
</script>

<style lang="scss" scoped>
.win {
  .head_box {
    box-shadow: -1rpx 7rpx 9rpx 0rpx rgba(169, 169, 169, 0.14);
    background-color: #ffffff;
    padding: 20rpx 0 30rpx 0;
    box-sizing: border-box;
    z-index: 2;
    .row {
      box-shadow: 3rpx 4rpx 6rpx 0rpx rgba(0, 0, 0, 0.1),
        0px 0px 5px 0px rgba(0, 0, 0, 0.1);
      display: flex;
      width: 92%;
      $h: 55rpx;
      height: $h;
      border-radius: $h/2;
      background-color: #fff;
      margin: 0rpx auto;
      overflow: hidden;
      align-items: center;
      padding-left: 40rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      .search_icon {
        $w: 31rpx;
        width: $w;
        margin-right: 0;
        height: $w;
      }
      input {
        padding-left: 20rpx;
        height: 100%;
        flex: 1;
      }
    }
    .tips_box {
      padding: 0 0 0 33rpx;
      margin-top: 10rpx;
      display: flex;
      flex-wrap: wrap;
      .act {
        p {
          background-color: $green;
          color: $white;
        }
      }
      .item {
        margin-top: 33rpx;
        margin-right: 33rpx;
        display: flex;
        justify-content: center;
        color: $green;
        p {
          display: inline-block;
          padding: 7rpx 24rpx 8rpx;
          font-size: 30rpx;
          border: 1rpx solid $green;
          border-radius: 30rpx;
        }
      }
    }
  }
  .class_data_box {
    .class_data {
      display: flex;
      width: 690rpx;
      margin: 20rpx auto 0;
      padding: 12rpx;
      box-sizing: border-box;
      background-color: #ffffff;
      box-shadow: -1rpx 7rpx 8rpx 0rpx rgba(169, 169, 169, 0.14);
      border-radius: 20rpx;
      position: relative;
      button {
        position: absolute;
        bottom: 24rpx;
        right: 28rpx;
        width: 148rpx;
        height: 44rpx;
        line-height: 44rpx;
        background: linear-gradient(
          0deg,
          rgba(11, 208, 94, 1),
          rgba(11, 208, 173, 1)
        );
        color: #ffffff;
        font-size: 23rpx;
        border-radius: 22rpx;
        letter-spacing: 2rpx;
      }
      img {
        width: 202rpx;
        height: 202rpx;
        border-radius: 10rpx;
      }
      .item_right_box {
        flex: 1;
        padding: 10rpx 0 10rpx 25rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          width: 420rpx;
          line-height: 1.2;
          font-size: 34rpx;
          color: #4d4d4d;
        }
        .time {
          color: #999999;
          font-size: 23rpx;
        }
      }
    }
  }
}
</style>
